<template>
  <el-container>
    <el-main>
      <el-table :data="formData.tableData" style="width: 100%">
        <el-table-column prop="url" label="url"> </el-table-column>
        <el-table-column prop="method" label="method"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="DetailsBtn(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="dialog">
        <el-dialog v-model="dialogFormVisible" title="详情页">
          <el-form :inline="true" :model="formData.detailsData">
            <el-row justify="center">
              <el-col :span="12">
                <el-form-item label="Method:">
                  <el-input
                    class="dialog-input"
                    disabled
                    v-model="formData.detailsData.method"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="URL:">
                  <el-input
                    class="dialog-input"
                    disabled
                    v-model="formData.detailsData.url"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row justify="center">
              <el-col :span="12">
                <el-form-item label="Method:">
                  <el-input
                    class="dialog-input"
                    disabled
                    v-model="formData.detailsData.method"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间:">
                  <el-input
                    class="dialog-input"
                    disabled
                    v-model="formData.detailsData.createTime"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="dialogFormVisible = false">
                关闭
              </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </el-main>
    <el-footer>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue"
import { getInterfaceList } from "../../request/login-view/login"
import { Search } from "@element-plus/icons-vue"
import axios from "../../request/axios"

const currentPage = ref(0) //当前页
const pageSize = ref(10) //
const total = ref() // 共几页
const dialogFormVisible = ref(false)

let formData = reactive({
  // 表格数据
  tableData: [],
  // 当前数据
  detailsData: {
    url: "",
    method: "",
  },
})

// 当前显示最大页数
const handleSizeChange = (val: any) => {
  pageSize.value = val
  getTableData()
  console.log(`每页 ${val} 条`)
}

// 当前页
const handleCurrentChange = (val: any) => {
  currentPage.value = val
  getTableData()
  console.log(`当前页: ${val}`)
}

// 获取表格数据
const getTableData = () => {
  // 接口请求
  getInterfaceList({
    current: currentPage.value,
    pageSize: pageSize.value,
  }).then((res) => {
    total.value = res.data.data.total
    formData.tableData = []
    res.data.data.records.map((e: never) => {
      formData.tableData.push(e)
    })
  })
}

// 详情页请求数据
const getInterfaceData = (method, url) => {
  if (method == "POST") {
    axios
      .post(url)
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.error(err)
      })
  } else if (method == "GET") {
    axios
      .get(url)
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.error(err)
      })
  }
}

// 详情按钮
const DetailsBtn = (e) => {
  dialogFormVisible.value = true
  formData.detailsData = e
  getInterfaceData(e.method, e.url)
}

onMounted(() => {
  getTableData()
})
</script>

<style lang="scss" scoped>
.container {
  .el-input {
    width: 200px;
  }
  .search-btn {
    margin-left: 8px;
  }
  .select-btn {
    margin-left: 8px;
  }
}
.dialog-input {
  width: 164px !important;
}
</style>
<style>
.el-form-item__label {
  width: 80px !important;
}
</style>
